<template>
<div class="app-container">
    <loading v-show="loading"></loading>
    <el-card class="box-card" style="margin-bottom:1%;">
        <div slot="header" class="clearfix">
          <span>党员考核</span>
          <div class="btn-box">
            <el-button
              size="mini"
              v-if="detailFlag"
              type="primary"
              @click="saveReport('save')" style="margin-right:20px" title="暂存数据">保 存</el-button>
              <el-button
              size="mini"
              type="primary"
              v-if="detailFlag"
              icon="el-icon-plus"
              @click="saveReport('submit')" style="margin-right:20px">提 交</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="$router.back(-1)" style="margin-right:20px;">返 回</el-button>
          <span v-if="!detailFlag" style="margin-right:20px">考核已完成</span>
          </div>
        </div>
        <el-table
          :data="selfReportedData"
          border
          max-height="450"
          ref="tableData"
          style="width: 100%;margin-bottom:1%;"
          >
          <el-table-column
            label="考核指标名称"
            width="180"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.dyIndexName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="权重"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.weights }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="自查自评得分"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.selfAssessmenScore }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="自查自评描述"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.selfAssessmentDesc }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="评分"
            width="200"
          >
            <template slot-scope="scope">
              <el-input-number :disabled="!detailFlag" v-model="scope.row.quarterAssessmenScore" :min="0" @change="changeNum(scope.row,$event)" :max="scope.row.weights" label="请输入评分值"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            label="扣分原因"
            width="180"
          >
            <template slot-scope="scope">
                <el-input :readonly="!detailFlag" v-model="scope.row.deductionReason" placeholder="请输入扣分原因"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
</div>
</template>
<script>
import Loading from '@/components/loading/loading'
import { getSelfReported, savaReportData, nowSaveReportData } from '@/api/partyMember/selfReported'
export default {
  components: {
    Loading
  },
  data() {
    return {
      searchData: {
        quarterCycleKey: '',
        operationFlag: '002'
      },
      num: 0,
      loading: false,
      details: [],
      historyList: [],
      selfDetail: [],
      AssessmentDetail: [],
      selfReportedData: [],
      saveData: {
        quarterCycleKey: this.$route.query.quarterCycleKey,
        operationFlag: '002',
        data: {
          quarterAssessmenDetailArray: []
        }
      },
      satisData: '',
      dzbMydcpDetails: [],
      nullData: {
        createTime: '',
        deleteState: '',
        dyQuarterAssessmenKey: '',
        quarterAssessmenDetailKey: '',
        selfAssessmenScore: -1,
        selfAssessmentDesc: '',
        quarterAssessmenScore: '',
        deductionReason: ''
      },
      detailFlag: true
    }
  },
  created() {
    this.loading = true
    this.searchData.quarterCycleKey = this.$route.query.quarterCycleKey
    this.getgetSelfReportedList()
  },
  methods: {
    changeNum(id, val) {
      // this.selfReportedData.forEach(v => {
      //   if (v.score) {
      //     v.score = val
      //   } else {
      //     v.score = 0
      //   }
      // })
    },
    getgetSelfReportedList() {
      getSelfReported(this.searchData).then(response => {
        this.dyIndexHistoryList = response.data.dyIndexHistoryList
        this.detailFlag = response.data.operFlag
        this.dyQuarterAssessmenDetailList = response.data.dyQuarterAssessmenDetailList
        if (this.dyQuarterAssessmenDetailList.length !== 0) {
          this.dyQuarterAssessmenDetailList.forEach(element => {
            const elementOne = this.dyIndexHistoryList.find(ele => ele.dyIndexHistoryKey === element.dyIndexHistoryKey)
            this.selfReportedData.push(Object.assign({}, element, elementOne))
          })
        } else {
          this.dyIndexHistoryList.forEach(ele => {
            this.selfReportedData.push(Object.assign({}, ele, this.nullData))
          })
        }
        this.loading = false
      }).catch(error => {
        this.loading = false
        console.log(error)
      })
    },
    saveReport(paramter) {
      for (const item in this.selfReportedData) {
        if (paramter === 'submit') {
          if (this.selfReportedData[item].deductionReason !== '') {
            this.saveData.data.quarterAssessmenDetailArray.push({
              quarterAssessmenDetailKey: this.selfReportedData[item].quarterAssessmenDetailKey,
              dyIndexHistoryKey: this.selfReportedData[item].dyIndexHistoryKey,
              selfAssessmenScore: this.selfReportedData[item].selfAssessmenScore,
              selfAssessmentDesc: this.selfReportedData[item].selfAssessmentDesc,
              quarterAssessmenScore: this.selfReportedData[item].quarterAssessmenScore,
              deductionReason: this.selfReportedData[item].deductionReason
            })
          } else {
            this.saveData.data.quarterAssessmenDetailArray = []
            break
          }
        } else {
          this.saveData.data.quarterAssessmenDetailArray.push({
            quarterAssessmenDetailKey: this.selfReportedData[item].quarterAssessmenDetailKey,
            dyIndexHistoryKey: this.selfReportedData[item].dyIndexHistoryKey,
            selfAssessmenScore: this.selfReportedData[item].selfAssessmenScore,
            selfAssessmentDesc: this.selfReportedData[item].selfAssessmentDesc,
            quarterAssessmenScore: this.selfReportedData[item].quarterAssessmenScore,
            deductionReason: this.selfReportedData[item].deductionReason
          })
        }
      }

      if (paramter === 'submit') {
        if (this.saveData.data.quarterAssessmenDetailArray.length !== 0) {
        // this.loading = true
          this.saveData.data = JSON.stringify(this.saveData.data)
          savaReportData(this.saveData).then(response => {
            this.loading = false
            this.$router.push({
              path: 'childMemberCircle',
              name: '子周期管理'
            })
            this.saveData = {
              quarterCycleKey: this.$route.query.quarterCycleKey,
              operationFlag: '002',
              data: {
                quarterAssessmenDetailArray: []
              }
            }
          }).catch(error => {
            this.saveData.data = JSON.parse(this.saveData.data)
            this.loading = false
            console.log(error)
          })
        } else {
          this.saveData = {
            quarterCycleKey: this.$route.query.quarterCycleKey,
            operationFlag: '002',
            data: {
              quarterAssessmenDetailArray: []
            }
          }
          this.$message({
            showClose: true,
            message: '考核内容都为必填项',
            type: 'warning'
          })
        }
      } else {
        this.saveData.data = JSON.stringify(this.saveData.data)
        nowSaveReportData(this.saveData).then(response => {
          this.loading = false
          this.$router.push({
            path: 'childMemberCircle',
            name: '子周期管理'
          })
          this.saveData = {
            quarterCycleKey: this.$route.query.quarterCycleKey,
            operationFlag: '002',
            data: {
              quarterAssessmenDetailArray: []
            }
          }
        }).catch(error => {
          this.saveData = {
            quarterCycleKey: this.$route.query.quarterCycleKey,
            operationFlag: '002',
            data: {
              quarterAssessmenDetailArray: []
            }
          }
          this.loading = false
          console.log(error)
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.satisDataP{padding:10px 0;position:relative;}
.detailBtn{position:absolute;right:0;top:50%;transform: translate(0,-50%);}
.el-form-item{margin-bottom:0;}
</style>
